<template>
	<z-paging ref="paging" v-model="applyData" @query="queryList">
		<!-- <view class="container">
			<view class="list" v-for="(item, index) in applyData" :key="index">
				<view class="leftList">
					<view class="date">
						{{ item.visit_date }}
					</view>
					<view class="gs">
						{{ item.visit_company }}
					</view>
				</view>
				<view class="rightList">
					<up-tag :text="item.status_label" :type="statusTypeMap[item.status]"></up-tag>
				</view>
			</view>
		</view> -->

		<view class="container">
			<!-- <up-cell v-for="(item, index) in applyData" :key="item" :center="false" :arrow="false">
				<template #title>
					<view class="flex justify-between">
						<text>姓名： {{ item.name }}</text>

						<view>
							<up-tag :text="item.status_label" :type="statusTypeMap[item.status]"></up-tag>
						</view>
					</view>
				</template>

				<template #label>
					<view class="label-info">
						<view>
							<text>
								性别： <text class="info-text">{{ item.gender == 1 ? '男' : '女' }}</text>
							</text>
						</view>
						<view>
							<text>
								手机号：<text class="info-text">{{ item.phone }}</text>
							</text>
						</view>
						<view>
							<text>
								来访单位：<text class="info-text">{{ item.visitor_company }}</text>
							</text>
						</view>
						<view>
							<text>
								来访人数：<text class="info-text">{{ item.visitor_count }}</text>
							</text>
						</view>
						<view>
							<text>
								受访单位：<text class="info-text">{{ item.visit_company }}</text>
							</text>
						</view>
						<view>
							<text>
								受访人名：<text class="info-text">{{ item.visit_person }}</text>
							</text>
						</view>
						<view>
							<text>
								访问事由：<text class="info-text">
									{{ item.reason }}
								</text>
							</text>
						</view>
						<view>
							<text>
								入园时间：<text class="info-text">{{ item.visit_date }}</text>
							</text>
						</view>
					</view>
				</template>

			</up-cell> -->
			<view class="card-container">
                <view v-for="(item, index) in applyData" :key="item" class="card">
                    <view class="card-header">
                        <text class="title">姓名：{{ item.name }}</text>
                        <!-- <view class="status-group" v-if="item.status == 0">
                            <text class="btn primary" @click="checkPassTo(item)">通过</text>
                            <text class="spacer"></text>
                            <text class="btn error" @click="checkRefuseTo(item)">拒绝</text>
                        </view> -->
                        <view v-if="item.status == 1" class="tag success">{{ item.status_label }}</view>
                        <view v-else-if="item.status == 2" class="tag error">{{ item.status_label }}</view>
                        <view v-else-if="item.status == 3" class="tag info">{{ item.status_label }}</view>
                    </view>

                    <view class="card-body">
                        <view class="info-row">
                            <text>性别：</text>
                            <text class="info-text">{{ item.gender == 1 ? '男' : '女' }}</text>
                        </view>
                        <view class="info-row">
                            <text>手机号：</text>
                            <text class="info-text">{{ item.phone }}</text>
                        </view>
                        <view class="info-row">
                            <text>来访单位：</text>
                            <text class="info-text">{{ item.visitor_company }}</text>
                        </view>
                        <view class="info-row">
                            <text>来访人数：</text>
                            <text class="info-text">{{ item.visitor_count }}</text>
                        </view>
                        <view class="info-row">
                            <text>受访单位：</text>
                            <text class="info-text">{{ item.visit_company }}</text>
                        </view>
                        <view class="info-row">
                            <text>受访人名：</text>
                            <text class="info-text">{{ item.visit_person }}</text>
                        </view>
                        <view class="info-row">
                            <text>访问事由：</text>
                            <text class="info-text">{{ item.reason }}</text>
                        </view>
                        <view class="info-row">
                            <text>入园时间：</text>
                            <text class="info-text">{{ formatTime(item.visit_date) }}</text>
                        </view>
                    </view>
                </view>
            </view>
		</view>
	</z-paging>
</template>

<script>
import {
	getVisitor
} from '../../api/reportedMaintenance.js'
import dayjs from 'dayjs';

export default {
	data() {
		return {
			applyData: [],
			statusTypeMap: {
				0: 'info',
				1: 'success',
				2: 'error',
				3: 'info'
			}
		};
	},
	methods: {
		queryList(pageNo, pageSize) {
			getVisitor({
				page: pageNo,
				limit: pageSize
			}).then((res) => {
				this.$refs.paging.complete(res.data);
			})
		},
		formatTime(time) {
            return dayjs(time).format('YYYY 年 MM 月 DD 日');
        },
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 25px;

	.list {
		display: flex;
		border-bottom: 1rpx #000 solid;
		padding: 25rpx;
		align-items: center;
		font-size: 30rpx;

		.leftList {
			flex: 1;
		}

		.rightList {
			text-align: right;
		}
	}

	.list:first-child {
		border-top: 1rpx #000 solid;
	}
}

.label-info {
	// margin-top: 10rpx;
	// padding-top: 10rpx;
	font-size: 18rpx;
	// border-top: 1px solid #eee;

	>view {
		margin-top: 5rpx;
		margin-bottom: 5rpx;
	}
}

// .info-text {
// 	color: #4a4a4a;
// }

.card-container {
    //   padding: 20rpx;
    // background: #ebebeb;
    box-shadow: none;
}

.card {
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    margin-bottom: 20rpx;
    padding: 20rpx;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;
}

.title {
    font-size: 34rpx;
    // font-weight: bold;
}

.status-group {
    display: flex;
    align-items: center;
}

.btn {
    font-size: 28rpx;
    padding: 6rpx 12rpx;
    border-radius: 6rpx;
    cursor: pointer;
}

.btn.primary {
    color: #fff;
    background-color: #007aff;
}

.btn.error {
    color: #fff;
    background-color: #ff4d4f;
}

.spacer {
    width: 20rpx;
}

.tag {
    font-size: 28rpx;
    padding: 6rpx 12rpx;
    border-radius: 6rpx;
    text-align: center;
}

.tag.success {
    color: #fff;
    background-color: #52c41a;
}

.tag.error {
    color: #fff;
    background-color: #f5222d;
}

.tag.info {
    color: #fff;
    background-color: #4d4e4f;
}

.card-body {
    margin-top: 10rpx;
}

.info-row {
    font-size: 26rpx;
    display: flex;
    align-items: center;
    //   justify-content: space-between;
    margin-bottom: 10rpx;
}

.info-text {
    color: #555;
    font-size: 28rpx;
}
</style>